<template>
  <div class="container">
    <div class="container__top">
      <div class="container__top__header">
        <div class="container__top__header__edit">编辑</div>
      </div>
    </div>
    <div class="container__top__content">
      <div class="container__top__content__header">

        <img class="container__top__content__header__img"
             :src="userInfo.imgUrl"
             alt="">

        <div class="container__top__content__header__name">{{userInfo.userName}}</div>
        <div class="container__top__content__header__id">ID:{{userInfo.userId}}</div>
      </div>
      <div class="container__top__content__info">
        <div class="container__top__content__info__item"><span class="container__top__content__info__item__text">红包</span> 218</div>
        <div class="container__top__content__info__item"><span class="container__top__content__info__item__text">优惠卷</span>12张</div>
        <div class="container__top__content__info__item"><span class="container__top__content__info__item__text">鲜豆</span>88</div>
        <div class="container__top__content__info__item"><span class="container__top__content__info__item__text">白条</span>100</div>
      </div>
      <div class="container__top__content__list">
        <div class="container__top__content__list__item">我的钱包 <span class="container__top__content__list__item__icon">&#xe694;</span></div>
        <div class="container__top__content__list__item">我的地址 <span class="container__top__content__list__item__icon">&#xe694;</span></div>
        <div class="container__top__content__list__item">客服与帮助 <span class="container__top__content__list__item__icon">&#xe694;</span></div>
      </div>
    </div>
  </div>
  <docker-view tag="user" />
</template>
<script>
import DockerView from '@/components/DockerView.vue'
import { ref } from 'vue'
import { get } from '@/utils/request'
const useGetUserEffect = () => {
  const userInfo = ref([])
  const getUserInfo = async () => {
    // 调用接口
    const result = await get('/api/user')
    if (result.data.code === '200') {
      userInfo.value = result.data.data
    } else {
      userInfo.value = []
    }
  }
  getUserInfo()
  return { userInfo }
}
export default {
  components: { DockerView },
  name: 'UserView',
  setup () {
    const { userInfo } = useGetUserEffect()
    return { userInfo }
  }

}
</script>
<style lang="scss" scoped>
.container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 49rem;
  background-color: #f8f8f8;
  &__top {
    &__header {
      height: 200rem;
      background-image: linear-gradient(
        0deg,
        rgba(0, 145, 255, 0) 4%,
        #0091ff 50%
      );
      background-repeat: no-repeat;
      &__edit {
        text-align: end;
        padding-top: 50rem;
        padding-right: 30rem;
        font-family: PingFangSC-Regular;
        font-size: 16rem;
        color: #ffffff;
      }
    }
    &__content {
      width: 339rem;
      height: 203rem;
      background-color: #fff;
      border-radius: 6rem;
      margin: 0 auto;
      position: relative;
      top: -100rem;
      margin: 18rem;
      display: flex;
      flex-direction: column;
      &__header {
        width: 339rem;
        height: 126rem;
        margin-bottom: 20rem;
        border-bottom: 1rem solid #f1f1f1;
        &__img {
          position: absolute;
          left: 123rem;
          top: -47rem;
          width: 94rem;
          height: 94rem;
          border-radius: 50%;
        }
        &__name {
          font-family: PingFangSC-Regular;
          font-size: 24rem;
          color: #262628;
          letter-spacing: 0.19rem;
          text-align: center;
          line-height: 36rem;
          margin-top: 59rem;
        }
        &__id {
          font-family: PingFangSC-Regular;
          font-size: 14rem;
          color: #c1c0c9;
          text-align: center;
          margin-bottom: 20rem;
        }
      }
      &__info {
        display: flex;
        justify-content: center;
        justify-content: space-evenly;
        &__item {
          display: flex;
          flex-direction: column;
          font-family: PingFangSC-Regular;
          font-size: 20rem;
          color: #262628;
          &__text {
            font-size: 12rem;
            color: #c1c0c9;
            text-align: center;
            margin-bottom: 4rem;
          }
        }
      }
      &__list {
        width: 339rem;
        height: 146rem;
        margin-top: 32rem;
        background-color: #fff;
        border-radius: 6rem;
        &__item {
          position: relative;
          font-size: 14rem;
          color: #262626;
          margin: 20rem;
          &__icon {
            position: absolute;
            right: 0;
          }
        }
      }
    }
  }
}
</style>
